<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="note" @blur="sub">

    <input type="button" @click="submit" value="发表留言" v-show="isShow1">
    <ul>
        <li v-for="(value,index) in note_list" :key="index">
            <span>{{value}}</span>
            <a href="javascript:;" @click="deleteNote(index)">删除</a>
        </li>
    </ul>
    <span>留言总数量: {{note_list.length}}条</span>
    <br>
    <!--    <input type="button" value="清空所有" @click="clear_all" v-show="isShow" >-->
    <input type="button" value="清空所有" @click="clear_all" v-show="note_list.length>0">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            note_list: ['vue真的好用', '百知教育'],
            note: "",
            isShow: true,
            isShow1: false,
        },
        methods: {
            // 添加留言
            submit() {
                let note = this.note;
                if (note) {
                    // this.note_list.push(this.note); // 添加值末尾
                    this.note_list.unshift(this.note); // 添加到首部
                    this.note = ''; //添加后清空
                    this.isShow = !this.isShow; // 添加后重置isShow
                    this.isShow1 = !this.isShow1; //添加后按钮消失
                }
            },
            //删除留言,更具下标删除
            deleteNote(index) {
                console.log(index);
                this.note_list.splice(index, 1) //第二个参数决定删除的个数
            },
            //清空所有留言
            clear_all() {
                let len = this.note_list.length;
                console.log(len);
                this.note_list.splice(0, len)
                this.isShow = !this.isShow;
            },
            sub(){
                this.isShow1 = !this.isShow1;
            }
        },

    })
</script>
</body>
</html>